<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Select - Custom</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
  </head>

  <body>
    <ion-app>
      <ion-header>
        <ion-toolbar>
          <ion-title>Select - Custom</ion-title>
        </ion-toolbar>
      </ion-header>

      <ion-content class="outer-content test-content">
        <ion-list>
          <ion-list-header>
            <ion-label> Standalone Select </ion-label>
          </ion-list-header>

          <ion-select placeholder="Default Select">
            <ion-select-option value="madison">Madison, WI</ion-select-option>
            <ion-select-option value="austin">Austin, TX</ion-select-option>
            <ion-select-option value="chicago">Chicago, IL</ion-select-option>
            <ion-select-option value="seattle">Seattle, WA</ion-select-option>
          </ion-select>

          <ion-select placeholder="Placeholder" class="custom-part-colors">
            <ion-select-option value="madison">Madison, WI</ion-select-option>
            <ion-select-option value="austin">Austin, TX</ion-select-option>
            <ion-select-option value="chicago">Chicago, IL</ion-select-option>
            <ion-select-option value="seattle">Seattle, WA</ion-select-option>
          </ion-select>

          <ion-select value="austin" class="custom-part-colors">
            <ion-select-option value="madison">Madison, WI</ion-select-option>
            <ion-select-option value="austin">Austin, TX</ion-select-option>
            <ion-select-option value="chicago">Chicago, IL</ion-select-option>
            <ion-select-option value="seattle">Seattle, WA</ion-select-option>
          </ion-select>

          <ion-list-header>
            <ion-label> Item Select </ion-label>
          </ion-list-header>

          <ion-item>
            <ion-label>Location</ion-label>
            <ion-select placeholder="Default Select">
              <ion-select-option value="madison">Madison, WI</ion-select-option>
              <ion-select-option value="austin">Austin, TX</ion-select-option>
              <ion-select-option value="chicago">Chicago, IL</ion-select-option>
              <ion-select-option value="seattle">Seattle, WA</ion-select-option>
            </ion-select>
          </ion-item>
        </ion-list>

        <ion-list>
          <ion-list-header>
            <ion-label>Custom Options</ion-label>
          </ion-list-header>

          <ion-item>
            <ion-label>Default Interface (Alert)</ion-label>
            <ion-select placeholder="Styled Options" class="custom-options">
              <ion-select-option class="select-option-custom-red" value="madison">Madison, WI</ion-select-option>
              <ion-select-option class="select-option-custom-red" value="austin">Austin, TX</ion-select-option>
              <ion-select-option class="select-option-custom-purple" value="chicago">Chicago, IL</ion-select-option>
              <ion-select-option class="select-option-custom-red" value="seattle">Seattle, WA</ion-select-option>
            </ion-select>
          </ion-item>

          <ion-item>
            <ion-label>Action Sheet Interface</ion-label>
            <ion-select placeholder="Styled Options" interface="action-sheet" class="custom-options">
              <ion-select-option class="select-option-custom-red" value="madison">Madison, WI</ion-select-option>
              <ion-select-option class="select-option-custom-red" value="austin">Austin, TX</ion-select-option>
              <ion-select-option class="select-option-custom-purple" value="chicago">Chicago, IL</ion-select-option>
              <ion-select-option class="select-option-custom-red" value="seattle">Seattle, WA</ion-select-option>
            </ion-select>
          </ion-item>

          <ion-item>
            <ion-label>Popover Interface</ion-label>
            <ion-select placeholder="Styled Options" interface="popover" class="custom-options">
              <ion-select-option class="select-option-custom-red" value="madison">Madison, WI</ion-select-option>
              <ion-select-option class="select-option-custom-red" value="austin">Austin, TX</ion-select-option>
              <ion-select-option class="select-option-custom-purple" value="chicago">Chicago, IL</ion-select-option>
              <ion-select-option class="select-option-custom-red" value="seattle">Seattle, WA</ion-select-option>
            </ion-select>
          </ion-item>

          <ion-item>
            <ion-label>Default Interface (Alert): Multiple</ion-label>
            <ion-select multiple="true" placeholder="Styled Options" class="custom-options">
              <ion-select-option class="select-option-custom-red" value="madison">Madison, WI</ion-select-option>
              <ion-select-option class="select-option-custom-red" value="austin">Austin, TX</ion-select-option>
              <ion-select-option class="select-option-custom-purple" value="chicago">Chicago, IL</ion-select-option>
              <ion-select-option class="select-option-custom-red" value="seattle">Seattle, WA</ion-select-option>
            </ion-select>
          </ion-item>
        </ion-list>
      </ion-content>

      <script>
        const selects = document.querySelectorAll('.custom-options');

        for (var i = 0; i < selects.length; i++) {
          selects[i].interfaceOptions = {
            cssClass: 'select-interface-custom',
          };
        }
      </script>

      <style>
        .custom-part-colors {
          text-align: center;
          justify-content: center;
          font-size: 13px;

          border-radius: 6px;
          box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
            0 1px 5px 0 rgba(0, 0, 0, 0.12);

          width: 80%;
          margin: 10px auto;
        }

        .custom-part-colors::part(placeholder),
        .custom-part-colors::part(text) {
          flex: 0 0 auto;
        }

        .custom-part-colors::part(placeholder) {
          color: #20a08a;
          opacity: 1;
        }

        .custom-part-colors::part(text) {
          color: #545ca7;
        }

        .custom-part-colors::part(icon) {
          color: #971e49;
          opacity: 1;
        }

        /* Alert Interface [Selector 1]: set color for alert options (single selection) */
        /* Alert Interface [Selector 2]: set color for checked alert options (single selection) */
        /* Alert Interface [Selector 3]: set color for alert options (multi selection) */
        /* Alert Interface [Selector 4]: set color for checked alert options (multi selection) */
        .select-interface-custom .select-option-custom-red .alert-radio-label,
        .select-interface-custom .select-option-custom-red[aria-checked='true'] .alert-radio-label,
        .select-interface-custom .select-option-custom-red .alert-checkbox-label,
        .select-interface-custom .select-option-custom-red[aria-checked='true'] .alert-checkbox-label {
          color: #971e49;
        }

        /* Alert Interface [Selector 1]: set color for alert options (single selection) */
        /* Alert Interface [Selector 2]: set color for checked alert options (single selection) */
        /* Alert Interface [Selector 3]: set color for alert options (multi selection) */
        /* Alert Interface [Selector 4]: set color for checked alert options (multi selection) */
        .select-interface-custom .select-option-custom-purple .alert-radio-label,
        .select-interface-custom .select-option-custom-purple[aria-checked='true'] .alert-radio-label,
        .select-interface-custom .select-option-custom-purple .alert-checkbox-label,
        .select-interface-custom .select-option-custom-purple[aria-checked='true'] .alert-checkbox-label {
          color: #545ca7;
        }

        /* Popover Interface: set color for the popover using Item's CSS variables */
        .select-interface-custom .select-option-custom-red {
          --color: #971e49;
          --color-hover: #79193b;
        }

        /* Popover Interface: set color for the popover using Item's CSS variables */
        .select-interface-custom .select-option-custom-purple {
          --color: #545ca7;
          --color-hover: #414ba1;
        }

        /* Action Sheet Interface: set color for the action sheet using its button CSS variables */
        .select-interface-custom .select-option-custom-red {
          --button-color: #971e49;
          --button-color-hover: #79193b;
        }

        /* Action Sheet Interface: set color for the action sheet using its button CSS variables */
        .select-interface-custom .select-option-custom-purple {
          --button-color: #545ca7;
          --button-color-hover: #414ba1;
        }
      </style>
    </ion-app>
  </body>
</html>
